<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../js/utils/bootstrap/css/bootstrap.min.css">

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /*background-color: lightpink;*/
            word-break: break-all;
            overflow: auto;
            height: 100vh;
            /*background-image: url(./assets/bg.jpeg) ;*/
            /*opacity: .5;*/

        }
        body a:hover{
            text-decoration: none;
        }
        .nav-wrapper{
            width: 100%;
            height: 40px;
            min-width: 800px;
            line-height: 40px;
            background-color: #003b5c;
            display: flex;

            justify-content:center;
            align-items: center;

        }
        .nav-box{
            margin: 0 auto;
            display: flex;
            min-width: 800px;
            justify-content: space-between;
        }
        .navItem{
            color:#8f99a3;
            margin: 0 20px;
        }
        .search{

        }
        .nav-wrapper>.nav-box>.navItem>.input-group>.form-control{
            color:#fff!important;;
            margin-top: 2px!important;
            background-color:#003b5c!important;
            border-radius: 25px!important;
            padding: 6px 20px;
            width: 250px!important;
        }
        .nav-wrapper>.nav-box>.navItem>.input-group>.input-group-btn>.btn-info{
            background-color:#003b5c!important;
            border: 0px;
            position: absolute;
            left:-50px;
            top:10px;
            z-index: 9999;
        }
        /*主体*/

        .CarouselWrapper{
            margin: 5px auto;
            width: 650px;
            height: 320px;
            /*background-color: #bfa;*/
        }

        .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{
            height: 320px !important;
            width: 100% !important;
        }
     /*   .carousel-control {
            width: 67px;
            height: 67px;
            transform: translateY(-50%);
            top: 50%;
            margin-top: 0;
            border: 0;
            border-radius: 50%;
            background: none;
        }

        .carousel-indicators {
            right: 50%;
            top: 100%;
            transform: translateY(-30px);
        }

        .carousel-indicators li {
            margin-left: 20px !important;
        }

        .carousel-inner .item {
            width: 100%;
        }

        .carousel-inner .item>img {
            margin: 0 auto;
        }

        .carousel-inner .item a {
            display: block;
            background-repeat: no-repeat;
            width: 100%;
            height: 440px;
            background-position: center top;
        }

        .cursorPointer {
            cursor: pointer;
        }*/

        .latestCoursesWrapper{
            margin: 5px auto;
            width: 1050px;
            height: 233px;
            /*background-color: #bfa;*/
        }



        .coursesWrapper{
            margin: 5px auto;
            width: 1050px;
            height: 233px;
            /*background-color: #bfa;*/
        }

        .cardBox{
            width: 180px;
            height: 170px;
            /*background-color: #bfa;*/
            border-radius: 5px;
            margin: 10px 40px;
            /*overflow: auto;*/
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            /*149,212,234*/
            /*box-shadow: 0 0 3px 3px rgba(149,212,234, 1) !important;*/
            box-shadow:0 5px 10px -5px  rgba(149,212,234, 1);
            transition: .2s;
        }
        .cardBox:hover{
            transform: scale(1.1);
            box-shadow:5px 5px 10px -4px  rgba(149,212,234, 1);
        }

        .input-group{
            /*font-size: 16px !important;*/
        }
        .input-group > .form-control{
            border: 0px  !important;

        }
        /*去除bootstrap点击按钮的边框*/
        .btn:focus{
            outline: none !important;
        }

        .loginBtn{
            background-color: #95d4ea;
            height: 30px;
            width: 100px;
            font-size: 16px;
            line-height: 30px;
            padding: 0px 10px;
            border-radius: 5px;
            display: block;
            text-align: center;
        }
        .regBtn{
            background-color: #EC7B6D;
            height: 30px;
            width: 100px;
            font-size: 16px;
            line-height: 30px;
            padding: 0px 10px;
            border-radius: 5px;
            display: block;
            text-align: center;
        }
        /*--------------*/
        .footer{
            margin-top: 80px;
            width: 100%;
            height: 40px;
            background-color: black;
            display: flex;
            color: #999999;
            align-items: center;
            justify-content: center;
            /*position: fixed;*/
            /*bottom: 0;*/
            /*z-index: -1;*/
        }

    </style>
</head>
<script src="../js/utils/jQuery/index.js"></script>

<script src="../js/utils/bootstrap/js/bootstrap.min.js"></script>

<body>
<div>
    <div class="nav-wrapper" >
        <div class="nav-box" >
            <div class="navItem"><img style="width: 50px;height:25px; " src="../assets/suss_logo_write.png" alt=""></div>
            <div class="navItem">ALL COURSES</div>
            <!--  <div class="navItem">
                  <input type="text" class="btn-search form-control" placeholder="Search">
              </div>-->
            <div class="navItem">
                <div class="input-group"  style="margin-top: 3px;">
                    <input type="text" class="form-control"placeholder="请输入字段名" />
                    <span class="input-group-btn">
                            <button type="submit" class="btn btn-info btn-search glyphicon glyphicon-search" style="margin-top: -7px;"></button>
                        </span>
                </div>
            </div>



            <div class="navItem">About US</div>
            <div class="navItem" style="display: flex;">
                <div style="display: flex;align-items: center;"><a href="02登录.html" class="loginBtn">Login</a></div>
                <div style="display: flex;align-items: center; margin-left: 5px;"><a href="03注册.html" class="regBtn">Register</a></div>
            </div>
        </div>
    </div>
</div>


<div class="CarouselWrapper">
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img  src="../assets/bg.jpeg" alt="First slide">
            </div>
            <div class="item">
                <img src="../assets/bg3.jpeg" alt="Second slide">
            </div>
            <div class="item">
                <img src="../assets/bg2.jpeg" alt="Third slide">
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>


<div class="latestCoursesWrapper">
    <div style="display: flex;justify-content: space-between;padding: 20px 20px 0 20px;">
        <div style="color:#999999;font-size: 16px;">Latest Courses</div>
        <div id="rightArrow"><img style="width: 30px;height: 22px;" src="../assets/右双箭头2.png" alt=""></div>
    </div>

    <div  style="display: flex; flex-wrap:wrap ;">

        <div class="cardBox">
            <div>
                <img  style="width: 100%;height: 100px" src="https://testsd.cicd.vpclub.cn/ghs/20210903/3933e97a0af2499c8d4d639549b63db1.png" alt="">
            </div>
            <div style="padding-left: 10px">Course Title</div>
           <div style="display: flex;justify-content: space-between">
               <div style="padding-left: 10px;color: #95d4ea;">S$Sessions #</div>
               <div style="align-self: flex-end;padding-right: 10px;color: #999999;">$200</div>
           </div>

        </div>

        <div class="cardBox">
            <div>
                <img  style="width: 100%;height: 100px;" src="../assets/bg2.jpeg" alt="">
            </div>
            <div style="padding-left: 10px">Course Title</div>
            <div style="display: flex;justify-content: space-between">
                <div style="padding-left: 10px;color: #95d4ea;">S$Sessions #</div>
                <div style="align-self: flex-end;padding-right: 10px;color: #999999;">$200</div>
            </div>
        </div>
        <div class="cardBox">
            <div>
                <img  style="width: 100%;height: 100px" src="https://testsd.cicd.vpclub.cn/ghs/20210903/3933e97a0af2499c8d4d639549b63db1.png" alt="">
            </div>
            <div style="padding-left: 10px">Course Title</div>   <div style="display: flex;justify-content: space-between">
            <div style="padding-left: 10px;color: #95d4ea;">S$Sessions #</div>
            <div style="align-self: flex-end;padding-right: 10px;color: #999999;">$200</div>
        </div>
        </div>
        <div class="cardBox">
            <div>
                <img  style="width: 100%;height: 100px" src="https://testsd.cicd.vpclub.cn/ghs/20210903/3933e97a0af2499c8d4d639549b63db1.png" alt="">
            </div>
            <div style="padding-left: 10px">Course Title</div>
            <div style="display: flex;justify-content: space-between">
                <div style="padding-left: 10px;color: #95d4ea;">S$Sessions #</div>
                <div style="align-self: flex-end;padding-right: 10px;color: #999999;">$200</div>
            </div>
        </div>
    </div>
</div>

<div class="coursesWrapper">
    <div style="display: flex;justify-content: space-between;padding: 20px 20px 0 20px;">
        <div style="color:#999999;font-size: 16px;">Latest Courses</div>
        <div id="rightArrow2"><img style="width: 30px;height: 22px;" src="../assets/右双箭头3.png" alt=""></div>
    </div>
    <div style="display: flex; flex-wrap:wrap ;">
        <div class="cardBox">
            <div>
                <img  style="width: 100%;height: 100px" src="https://testsd.cicd.vpclub.cn/ghs/20210903/3933e97a0af2499c8d4d639549b63db1.png" alt="">
            </div>
            <div style="padding-left: 10px">Course Title</div>
            <div style="display: flex;justify-content: space-between">
                <div style="padding-left: 10px;color: #95d4ea;">S$Sessions #</div>
                <div style="align-self: flex-end;padding-right: 10px;color: #999999;">$200</div>
            </div>
        </div>
        <div class="cardBox">
            <div>
                <img  style="width: 100%;height: 100px" src="https://testsd.cicd.vpclub.cn/ghs/20210903/3933e97a0af2499c8d4d639549b63db1.png" alt="">
            </div>
            <div style="padding-left: 10px">Course Title</div>
            <div style="display: flex;justify-content: space-between">
                <div style="padding-left: 10px;color: #95d4ea;">S$Sessions #</div>
                <div style="align-self: flex-end;padding-right: 10px;color: #999999;">$200</div>
            </div>
        </div>
        <div class="cardBox">
            <div>
                <img  style="width: 100%;height: 100px" src="https://testsd.cicd.vpclub.cn/ghs/20210903/3933e97a0af2499c8d4d639549b63db1.png" alt="">
            </div>
            <div style="padding-left: 10px">Course Title</div>
            <div style="display: flex;justify-content: space-between">
                <div style="padding-left: 10px;color: #95d4ea;">S$Sessions #</div>
                <div style="align-self: flex-end;padding-right: 10px;color: #999999;">$200</div>
            </div>
        </div>
        <div class="cardBox">
            <div>
                <img  style="width: 100%;height: 100px" src="https://testsd.cicd.vpclub.cn/ghs/20210903/3933e97a0af2499c8d4d639549b63db1.png" alt="">
            </div>
            <div style="padding-left: 10px">Course TitleCourse</div>
            <div style="display: flex;justify-content: space-between">
                <div style="padding-left: 10px;color: #95d4ea;">S$Sessions #</div>
                <div style="align-self: flex-end;padding-right: 10px;color: #999999;">$2000000</div>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    Copyright @ 2021 Singapore University of Social Sciences.All rights reserved.
</div>



<script>
    $('#myCarousel').carousel({
        interval: 2000
    })
    $("#rightArrow").click(function(){
     console.log("跳转详情页")
    });
    $("#rightArrow2").click(function(){
        console.log("跳转详情页")
    });
/*  $(function(){
      // 初始化轮播
      $(".start-slide").click(function(){
          $("#myCarousel").carousel('cycle');
      });
      // 停止轮播
      $(".pause-slide").click(function(){
          $("#myCarousel").carousel('pause');
      });
      // 循环轮播到上一个项目
      $(".prev-slide").click(function(){
          $("#myCarousel").carousel('prev');
      });
      // 循环轮播到下一个项目
      $(".next-slide").click(function(){
          $("#myCarousel").carousel('next');
      });
      // 循环轮播到某个特定的帧
      $(".slide-one").click(function(){
          $("#myCarousel").carousel(0);
      });
      $(".slide-two").click(function(){
          $("#myCarousel").carousel(1);
      });
      $(".slide-three").click(function(){
          $("#myCarousel").carousel(2);
      });
  });*/
</script>
</body>
</html>